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Abstract: The purpose of this study was to investigate proper website and courseware for e- 
learning in higher education. Methods used in this study included the data collection, the 
analysis surveys, the experts' in-depth interview, and the experts’ focus group. Results 
indicated that there were 16 components for website, as well as 16 components for courseware 
with suggestions for basic design layout to be considered. Based on the findings, results 
showed that the models were proposed, and the prototypes were created to examine the 
effectiveness and the learners’ satisfaction of the models. The surveys’ results of users’ 
usability and their satisfaction showed high level effectiveness of the prototypes, as well as 
high satisfaction towards the prototypes. Therefore, such models of proper website and 
courseware for e-learning in higher education should be in consideration as grounded 
components and basic design layout when design and development of website and courseware 
for e-learning in higher education. (Contains 9 figures) 



Introduction 

In accordance with the Thai National Education Act B.E. 1999, increasing of educational opportunities 
for Thai people is an important government policy. The opportunities in enhancing Thai people’s knowledge 
both in urban and rural areas widely and equally, regardless of economic status, were emphasized. Thus for, a 
gap between knowledge levels of the population has been decreased; whilst the chances for lifelong learning 
and the building up of knowledge based society have been enhanced. Thailand Cyber University Project (TCU), 
under the Office of the Higher Education Commission (OHEC), Ministry of Education, is an ongoing project 
being carried out according to OHEC’s strategic plan related to an enhancement of lifelong learning, TCU’s 
major responsibility is to assist all the higher education institutes to deliver distance learning via the Internet; 
ensure that all online courses are of a high quality and meet government standards; promote the sharing of 
teaching resources and human resources by introducing a credit exchange mechanism between higher education 
institutions. Hence, one of the TCU’s missions is to conduct research and development in the use of IT to 
deliver learning online, using a Learning Management System (LMS), for the Cyber University. In fact, TCU’s 
missions are to research, develop, discover, and use educational innovations and new technologies for e- 
leaming, while maintaining internationally accepted educational standards and ensuring a high level of 
productivity by using established development processes; and to cooperate with both state and private higher 
educational institutions in order to develop informal certificated courses related to e-learning in higher 
education. 

Nowadays, though there are various formats of website and courseware design, there is no common 
ground or proposed models that institutions that plans to initiate e-leaming program can follow. Also, to 
response to one of the TCU’s missions is to conduct a research and development of standards and quality 
assurance of Thai distance education. Accordingly, a research project on developing models of proper website 
and courseware for e-leaming in higher education is essential. Such models along with suggested guidelines 
would extremely assist the institutions to get started with a design and a development of website and 
courseware for their e-leaming properly. In addition, since one of the TCU certificated courses titled Designing 
Effective Website and Courseware for e-leaming, research finding would definitely increase the quality of the 
course contents. Learners who are mostly instmctors and instructional designers in public and private institutes 
would gain the research-based content while attending this course. They later on would definitely apply such 
finding to their teaching courses or their current work extensively. 




Objectives of this research are: (1) to review the related literatures including research reports and 
academic articles and also to survey the need and preferred website and courseware formats from the learners as 
well as the experts, (2) to ask for experts’ opinions in relations to the proper model of website and courseware 
for e-leaming in higher education by employing the focus group method, (3) to develop the proper model of 
website and courseware for e-leaming in higher education based on the Thai context, and (4) to develop the 
prototype of the website and courseware in order to try out for usability testing and users’ satisfaction with the 
online learners. According to the mentioned objectives, higher education institutes will have proper model of 
website and courseware for e-leaming in higher education appropriating to Thai context. Also, TCU can employ 
such findings to improve their e-learning website and courseware to the higher quality of teaching and learning. 



The Research Study 

A framework of this research study was based on the 6 major areas including (1) Multimedia design 
including picture, graphic, animation, text, sound, and video (2) Interface design (3) Content design (4) Design 
of navigation (5) Design of Usability and (6) Design of Accessibility (Alessi and Trollip, 1991; Gary, 2008; 
Khan, 2005; Lynch and Horton, 1999; Mayer, 2005; Waterhouse, 2005). The research methodology employed a 
research and development method in order to develop a proposed model and to investigate the result of the 
developed model and prototype. Accordingly, the research methodology consisted of 4 phases as follows: 

Phase 1 in response to the objective 1 to review the related literatures including research reports and 
academic articles and also to survey the need and preferred website and courseware formats from the learners as 
well as the experts, the output emerging out from this phase is components for drafts of proposed models. Detail 
procedures are as follows: 

1. Analyzing and synthesizing related documents including research reports, academic articles. Such 
information was used as guidelines to design and develop effective website and courseware appropriate to the 
higher education e-leaming environment. 

2. In addition to the information gained from the related documents, researcher conducted the survey to 
online instructors and learners to investigate their need and their preferences. The returned surveys were from 
10 online instmctors and also 64 learners of the e-learning program were reported and used as guidelines to 
conduct the proposed models. 

Phase 2 in response to the objective 2 to ask for experts’ opinions in relations to the proper model of 
website and courseware for e-learning in higher education by employing the focus group method, the output 
emerging out from this phase is the drafts of proposed models. Detail procedures are as follows: 

1. In-depth interviews with 10 experts answering to the surveys and who have at least one year 
experience teaching in e-leaming mode were conducted to confirm an appropriateness of the survey results. The 
result of the 16 components for website and 16 components for courseware design were adjusted accordingly. 

2. Based on the above results, the researcher proposed a draft model of website and courseware for 
e-learning in higher education that experienced instructors and learners were in agreement to be important. 

Phase 3 in response to the objective 3 to develop the proper model of website and courseware for e- 
leaming in higher education based on the Thai context, the output emerging out from this phase is the drafts of 
prototypes based on the models. Detail procedures are as follows: 

1. The researcher invited the experts who have had experiences with e-leaming at least 3 years to 
evaluate the draft model of website and courseware for e-learning in higher education appropriating to the Thai 
context. There were found minor inappropriate details) in some components. The changes were made 
accordingly. Thus, the website model comprising of 16 important components (orders are according to the 
website design procedures) includes: multimedia design (background), multimedia design (text), link design, 
content design, attractive/instructional effective content, multimedia design (graphic), reliability, content 
quality, navigation, multimedia (audio), multimedia (video), web2.0 technology, link control, accessibility, 
usability testing, and design quality. The courseware model also comprising of 16 important components 
(orders are according to the website design procedures) includes: multimedia (background), multimedia (text), 
link design, content design, attractive/instructional effective content, content quality, multimedia dimension 
(graphic), navigation, multimedia (audio), multimedia (video), learning activity, learning assessment and 
evaluation, learning feedback, courseware information, quality assessment, and SCORM standard. 




2. The models of web design and courseware design were drafted and presented to the experts to 
brainstorm about the appropriateness of a position of each element on the page design and layout. The models 
then were revised based on the experts’ comments. 

Phase 4 in response to the objective 4 to develop the prototype of the website and courseware in order 
to try out for usability testing and users’ satisfaction with the online learners, the output emerging out from this 
phase is the proposed models. Detail procedures are as follows: 

1. The prototypes designed in accordance to the proposed website and courseware design models for 
Thai higher education e-learning were conducted. Such prototypes were evaluated by the feedback from 50 
retuned surveys of learners who are online instructors and learners in TCU project. 

2. To guarantee that the prototypes were appropriate, the models and prototypes of website and 
courseware were last examined by the experts to guarantee that they were appropriate in terms of the 
components and element position to the higher education e-learning in Thailand. 

3. Adjustment of the models and the prototypes were made according to the learners’ comments, as 
well as experts’ suggestions. Then, the proposed models of proper website and courseware for e-leaming in 
Thai higher education were presented. 



Findings 

According to the proposed models of proper website and courseware for e-learning in higher 
education, four parts of findings were presented. 

Part 1: Analyzing and synthesizing of 68 related documents and 64 returned surveys 

Documents included research reports and academic articles. Indeed, researchers collected research 
reports and academic articles related to the proper website and courseware design from the year 1995-2005. 
Sixty eight research reports/academic articles were found including 39 research reports/academic articles related 
to website design and 29 research reports/academic articles related to courseware design. Additionally, there 
were total of 64 learners of the e-learning professional program participating in the survey. 56% are male and 
44% are female. The majority of learners aged between 41-50 (28%) and has held the master degree (66%). 
Most of them have a major in information technology (28%) while some of them majored in educational 
technology (17%) and engineering (8%). Most learners in this program work as a government officers (32%) 
lecturers in public and private institutes (28%) and full-time students (13%) respectively. Most of them have 
working experience for over 16 years (39%). All of them are currently joining TCU e-learning professional 
program consisting of 3 majors: 47% are in E-Learning Courseware Designer, 28% are in E-Learning Project 
Manager, and 20% are in E-Learning Instructor respectively. 

Part 2: Drafts of proposed models 

There were total of 10 experts participating in the survey. Half of them are male and another are 
female. All of them are government officers of OHEC who are responsible in teaching online courses in various 
programs, such as courseware production course, introduction to e-leaming course, development of educational 
media by Mind Mapper course, development of educational media by MS Producer course, introduction to 
computer graphic course, and development of streaming media course. 

Website’s components: Based on the results from the three surveys, experts’ in-depth interview, and 
experts’ focus group, the proper model of website for higher education e-learning consisted of 16 components 
was proposed. Though, the components could be classified into 3 categories including multimedia design, 
content design, and interface design, the presented component orders were in accordance to the design 
procedures. Details of each component were reported as follows: 

1) Multimedia Design: Background 

The appropriate background for the instructional effectiveness was a light color background with dark 
color text. In fact, instructors and learners agreed that attractive background for the instructional effectiveness 
should use light white color theme for background with dark blue color or dark brown color for text. Also, the 
use of plain simple white background with black font would be appropriate most in the content area. 

2) Multimedia Design: Text 

The appropriate text for the instructional effectiveness should be easy to read. The attractive text for 
the instmctional effectiveness should be Tahoma or Verdana. In other words, the text should be in san-serif type 




which appropriate and easy to read on the computer screen. The size should be approximately 10-20 points 
depending on the text position on the screen. 

3) Interface Design: Links 

The appropriate links for the instructional effectiveness and attractiveness should include title name 
with clear clarify, links within a website, and a link back to the main page. 

4) Content Design: Elements 

The appropriate content design for the instructional effectiveness should at least contain captioned 
graphic and video motion. 

5) Content Design: Format 

In order to gain learners’ attractiveness and instructional effectiveness, content should be concise, 
updated, and chunked to help organize contents in appropriate categories. 

6) Multimedia Design: Graphics 

The appropriate graphics for the instructional effectiveness should be in line with the objectives as well 
as the content. The most attractive graphics for the instructional effectiveness was animated graphics. 

7) Content Design: Reliability 

The appropriate content reliability that had an impact to learners’ attractiveness and effectiveness to 
the learning was to address web master contact information including name and e-mail address, recent updated 
date and time, and also to include related links relevance to the contents. 

8) Content Design: Quality 

The appropriate and attractive content quality for the instructional effectiveness should present fact 
with no bias. Completeness of the content with referencing to the resource used should be provided. 

9) Interface Design: Navigation 

The appropriate navigation for the instructional effectiveness should at least provide site structure of 
the website to help learners navigate the website. It should also provide alternative links for information 
searching with a link back to the main page consistently. Also, experts agreed that the navigation should 
indicate the progress made, so that learners know exactly where they are on the website without guessing. In 
other words, the use of bread crumbing feature should be in consideration. 

10) Multimedia Design: Audio 

The appropriate audio for the instructional effectiveness should be clear with appropriate intonation. 
Also, there should be an option for audio to turn on and off continually. The attractive audio for the 
instructional effectiveness should be an option for turn on and off a background audio. 

11) Multimedia Design: Video 

The appropriate video for the instructional effectiveness should be used as supplement media to the 
text and graphic rather than the core media. The video should also contain an option to turn on and off 
continually. The attractive video for the instructional effectiveness should be downloadable, embedded on the 
webpage, the embedded video size that not larger than 320x265pixel with an option linking to full screen page 
When asking about the video content, the learners agreed that the updated innovation related to the TCU project 
and organization would be most interesting to them. 

12) Interface Design: Web 2.0 as a supported tool 

The appropriate web 2.0 as a supported tool for web design for the instructional effectiveness included: 
(1) web application tools, such as blog and RSS feed, (2) communication tools, such as chat, instant message, 
desktop video conference, and podcast, (3) community tools, such as webboard, wiki, and other social 
networking tools, (4) file sharing tools, such as, photo sharing, video sharing, music sharing, and document 
sharing. Indeed, the attractive web 2.0 tool for the instructional effectiveness includes blog, chat/instant 
message, and wiki. 

13) Interface Design: Link control 

The appropriate link control for the instructional effectiveness and attractiveness included an easy to 
control with rapid content accessibility to the desired content and information. 

14) Interface Design: Accessibility 

The appropriate web accessibility for the instructional effectiveness and attractiveness includes easy to 
be accessible, and provided prompt interaction with the users. 

15) Interface Design: Usability testing 

The appropriate web usability for the instructional effectiveness includes the test of interface design 
(links should be emphasized), content design, and accessibility (accessible speed should be concerned). In fact, 
the attractive usability testing_for the instructional effectiveness and attractiveness include easy to get to a 
desired contents with prompt assist or interaction to the users. 




16) Interface Design: Quality 

The appropriate web design quality for the instructional effectiveness and attractiveness includes 
ability to get to a specific navigated content easily and precisely. 

Courseware’s components: based on the results from the three surveys, experts’ in-depth interview, 
and experts’ focus group, the proper model of courseware for higher education e-leaming consists of 16 
components was proposed. Though, the components could be classified into 3 categories including multimedia 
design, content design, and interface design, the presented component orders were in accordance to the design 
procedures. Details of each component were reported as follows: 

1) Multimedia Design: Background 

The appropriate background for the instructional effectiveness should use light color background with 
dark color text. In fact, instructors and learners agreed that attractive background for the instructional 
effectiveness should use light white color theme for background with dark blue color. Also, the use of plain 
simple white background with black font would be appropriate most in the content area. 

2) Multimedia Design: Text 

The appropriate text for the instructional effectiveness should be easy to read. The attractive text for 
the instructional effectiveness should be Tahoma or Verdana. In other words, the text should be in san-serif type 
which appropriate and easy to read on the computer screen. The size should be approximately 10-20 points 
depending on the text position. 

3) Link Design 

The appropriate link design for the instructional effectiveness should include quick accessibility to the 
navigated content, easy to control links, and the control over instructional pathways. The most attractive link 
design for the instructional attractiveness and effectiveness was the prompt accessibility to the navigated 
content. 

4) Content Design: Elements 

The appropriate content design for the instructional effectiveness and attractiveness should at least 
contain animated graphics for an emphasized/important content, as well as brief video for important evidences. 

5) Content Design: Format 

In order to gain learners’ attractiveness and instructional effectiveness, content should be chunked into 
a brief topic representing one concept for one content presentation. The presentation would be attractive to 
learners when content was in a well organized and a sequencing manner. When asking about the courseware 
learning method, learners preferred a courseware that could be recordable of learning process. In fact, learners 
preferred a courseware with recordable play and pause function that every time when they access to the 
courseware, they can continually see the content without starting over again at the beginning. 

6) Content Design: Quality 

The appropriate content quality for the instructional effectiveness should be completeness and in line 
with objectives. The content should also be updated. The content quality for the instructional attractiveness and 
effectiveness should be well organized with linkages among contents, completed, and in line with objectives. 

7) Multimedia Design: Graphic 

The appropriate graphics for the instructional effectiveness should be in line with the objectives as well 
as the content. The most attractive graphics for the instructional effectiveness was animated graphics. 

8) Interface Design: Navigation 

The appropriate navigation for the instructional effectiveness and attractiveness included consistent 
navigation icons/links. Also, the navigation should indicate the progress made and the current location must be 
shown so that learners know exactly where they are. 

9) Multimedia Design: Audio 

The appropriate audio for the instructional effectiveness should be clear, enthusiasm, and attractive 
with appropriate intonation. Also, there should be an option for audio to turn on and off narration continually. In 
fact, the most attractive audio for the instructional effectiveness should be an option for turn on and off a 
background audio, and a narration should be clear with appropriate and passionate tone. 

10) Multimedia Design: Video 

The appropriate video for the instructional effectiveness should be used as supplement media to the 
text and graphic rather than the core media. The attractive video for the instructional effectiveness should be 
downloadable. When asking about a preferred video type, instructors and learners agreed with a video used to 
enhance understanding of concepts in each topic. 




11) Content & Interface Design: Learning activity 

The appropriate learning activity for the instructional effectiveness was to provide an opportunity for 
learners’ interaction. The attractive learning activity for the instructional effectiveness should be an activity 
emphasizing on learners’ interaction, especially one with guided questions. Such questions would enhance 
learners’ opportunity to exchange thoughts and ideas through the use of online communication tools, such as a 
webboard. 

12) Content & Interface Design: Learning assessment and evaluation 

The appropriate learning assessment and evaluation for the instructional effectiveness should be in line 
with the learning objectives. The attractive learning assessment and evaluation for the instructional 
effectiveness includes multiple choice questions with multiple chances to answering such questions, and also 
test scores should be presented promptly. 

13) Content & Interface Design: Learning Feedback 

The appropriate feedback for the instructional effectiveness should be presented in the same screen 
with questions and answers. In fact, the attractive learning feedback for the instructional effectiveness should be 
included questions, answers, and feedback on the same screen and, should also provide answers after a few 
times attempt. 

14) Content Design: Information 

The appropriate information should be included at least course objectives that would enhance learners’ 
instructional effectiveness and attractiveness to the courseware. 

15) Content Design: Assessment 

The appropriate quality assessment for the instructional effectiveness and attractiveness should be 
considered a courseware that goes in line with designed curriculum. 

16) Interface Design: SCORM Standard 

The appropriate SCORM standard for the instructional effectiveness should be considered a 
courseware that compatible with various Learning Management System (LMS) platforms. In order to gain 
learners’ attractiveness regarding the SCORM standard, courseware should be adaptive which could be fitted to 
learners with different learning styles and personalities. 




Figure 1: Website’s components could be classified Figure 2: Courseware’s components could be classified into 3 

into 3 categories including multimedia design, categories including multimedia design, content design, 

content design, and website interface design and courseware interface design 



Part 3: Drafts of prototypes based on the proposed models 

According to the summary of 16 components from the survey results and experts’ in-depth interview, 
and information gained during the experts’ focus group, it provided not only the summary of vital components, 
but also the proper design layout for webpage and courseware designs in higher education e-leaming. Figure 3 
shows the summary of proposed models for website design, while figure 6 shows summary of proposed model 
of courseware design, gained during the research project phases 1 and 2. 

Additionally, based on the proper components and layout for webpage and courseware designs for 
higher education e-learning, draft prototypes were conducted in order to investigate levels of effectiveness and 
learners’ satisfaction toward the prototypes. Result gained during this research phase 3 would be beneficial for 






the website and courseware developer to design and develop the proper website and courseware for higher 
education e-leaming. Therefore, the screen capture with captioned numbers of the webpage prototype was 
presented in figure 4 and 5. While figure 4 presented the homepage for a project and/or an organization, figure 5 
presented the course homepage. Also, figure 7 presented the screen capture of the courseware prototype. 




Figure 3: Model of vital components with proper layout for webpage design for 
higher education e-learning (Components’ number are captioned) 
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Figure 4: Prototype of homepage for a project 



Figure 5: Prototype of course homepage 






Figure 6: Model of vital components with proper layout for courseware design for 
higher education e-learning (Components’ number are captioned) 




Figure 7: Prototype of a courseware deign for higher education e-learning 




Part 4: The proposed models 

In this section, the finding of effectiveness level of the proposed model of appropriate website and 
courseware for e-leaming in higher education is presented. Also, the learners’ satisfaction level toward the 
prototypes based on the proposed models of appropriate website and courseware for e-leaming in higher 
education is also presented. The result found from the effectiveness of website and courseware for higher 
education e-leaming was in high level (80% up). In fact, there were seven dimensions when considering the 
effectiveness of such website and courseware including: (1) multimedia design (7items) (2) interface design 
(13items) (3) content design (lOitems) (4) navigation design (21items) (5) usability (5items), and (6) 
accessibility (7items). 

The result found from the learners’ satisfaction toward the web design prototype was in high level (X = 
4.08, S.D. = .55). In fact, there were four dimensions when considering the learners’ satisfaction toward the 
website prototype including webpage layout (ATT1), content design (ATT2), screen design (ATT3), and 
assessment design (ATT4). When considering into each dimension, the findings were found as follows: 
satisfaction toward the content design (ATT 2) had a highest mean (X = 4.25, S.D. = .53), followed by 
satisfaction toward screen design (ATT 3) (X = 4.08, S.D.= .53), and satisfaction toward webpage layout (ATT 
1) (X = 4.06, S.D.= .63) respectively. Figure 8 shows learners’ satisfaction levels toward the webpage prototype. 
Besides, when considering the result found from the learners’ satisfaction toward the courseware design 
prototype, the overall was in high level (X = 4.08, S.D. = .58). In fact, there were 8 dimensions when 
considering the learners’ satisfaction toward the courseware prototype including introduction design (ATT1), 
content appropriateness (ATT2), language appropriateness (ATT3), instructional design (ATT4), multimedia 
design (ATT5), interactive design (ATT6), feedback design (ATT7), and courseware formats (ATT8). When 
considering into each dimension, the findings were found as follows: satisfaction toward the language 
appropriateness (ATT3) had a highest mean (X= 4.28, S.D. = .50), followed by satisfaction toward instmctional 
design (ATT4) (X = 4.26, S.D.= .61), and satisfaction toward multimedia design (ATT 5) ( X = 4.21 S.D.= .62) 
respectively. Figure 9 shows levels of learners’ satisfaction toward the courseware prototype. 




Figure 8 Levels of satisfaction of learners toward 
the webpage prototype 



Figure 9 Levels of satisfaction of learners toward 
the courseware prototype 



Conclusions 

According to the need of one common proper model of website and courseware designs for higher 
education, institutions seeking to initiate e-leaming program can apply as grounded guidelines. Also, in order to 
response to one of the TCU’s missions that is to conduct a research and development of standards and quality 
assurance of Thai distance education, this research study aims to proposed research based design models of 
appropriate website and courseware for e-learning in higher education. Thus, to achieve such aim, four phases 
of research methodology were conducted: Phase 1 was responded to the objective 1 reviewing the related 
literatures including research reports and academic articles and also to survey the need and preferred website 
and courseware formats from the learners as well as the experts, the output emerging out from this phase was 



components for drafts of proposed models. The finding of this phase included the analyzing and synthesizing of 
68 related documents and 64 returned survey from online learners. Phase 2 was responded to the objective 2 
asking for experts’ opinions in relations to the proper model of website and courseware for e-learning in higher 
education by employing the focus group method, the output emerging out from this phase was the drafts of 
proposed models. The finding of this phase included 16 components of the proper model of website and another 
16 components for the proper model of courseware along with suggested design layout for Thai higher 
education e-leaming context. Phase 3 was responded to the objective 3 developing the proper model of website 
and courseware for e-learning in higher education based on the Thai context, the output emerging out from this 
phase was the drafts prototypes based on the proposed models. Phase 4 was responded to the objective 4 
developing the prototype of the website and courseware in order to try out for usability testing and users’ 
satisfaction with the online learners, the output emerging out from this phase was the proposed models. 

The future plan, based on the research finding, the researcher would apply such research based models 
into practice by conducting the handbook of design and development of appropriate website and courseware for 
higher education e-learning. The manual will be in a form of step-by-step with easy to follow instruction. Open 
source and freeware will be enhanced due to the budget constraint that most institutions are facing. 
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